<template>
  <div class="md:flex">
    <Card
      size="small"
      :loading="loading"
      title="历史订单"
      class="md:w-4/4 w-full !md:mt-0 !mt-4 cursor-pointer"
      :canExpan="false"
    >
      <BasicTable
        titleHelpMessage="温馨提醒"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
      />
      <template #extra>
        <a href="#" style="color: #1951be">@协作网</a>
      </template>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { BasicColumn, BasicTable } from '/@/components/Table';
  import { listAppointment } from '/@/api/sys/desktopApi';
  import { useUserStore } from '/@/store/modules/user';
  import user from 'mock/sys/user';
  const columns: BasicColumn[] = [
    {
      title: '服务商',
      dataIndex: 'shop_name',
      width: 230,
      align: 'center',
    },
    {
      title: '服务',
      dataIndex: 'product_name',
      width: 130,
      align: 'center',
    },

    // {
    //   title: '状态',
    //   dataIndex: 'payment_state',
    //   width: 130,
    //   align: 'center',
    //   customRender: ({ record }) => {
    //     return record.payment_state ? '已支付' : '待支付';
    //   },
    // },
    {
      title: '时间',
      dataIndex: 'create_time',
      width: 130,
      align: 'center',
    },
  ];

  const dataSource = ref([]);
  const loading = ref(true);

  // 获取预约数据
  const fetchAppointmentData = async () => {
    try {
      loading.value = true;
      const phone = useUserStore().getUserInfo.loginCode;
      // 获取当前时间
      const timeNow = new Date();
      // 获取半年前的时间
      const halfYearAgo = new Date(timeNow.getTime() - 12 * 30 * 24 * 60 * 60 * 1000);
      const response = await listAppointment({
        phone: phone,
        startTime: halfYearAgo.toISOString().split('T')[0],
      });
      console.log('预约数据:', response);
      dataSource.value = response || [];
    } catch (error) {
      console.error('获取预约数据失败:', error);
      dataSource.value = [];
    } finally {
      loading.value = false;
    }
  };

  onMounted(() => {
    fetchAppointmentData();
  });
</script>
